    <style include="pdf-shared">
      #item {
        align-items: flex-start;
        cursor: pointer;
        display: flex;
        padding: 5px 0;
        position: relative;
        transition: background-color 100ms ease-out;
      }

      #item:hover {
        background-color: var(--cr-menu-background-focus-color);
      }

      #item:active {
        background-color: rgba(255, 255, 255, 0.25);
      }

      #title {
        outline: none;
        overflow: hidden;
        text-overflow: ellipsis;
      }

      #title:focus-visible {
        outline: auto -webkit-focus-ring-color;
      }

      #expand-container {
        --expand-button-size: 28px;
        flex-shrink: 0;
        position: relative;
        width: var(--expand-button-size);
      }

      /* Forces #expand-container to have a height of 1 line-height. */
      #expand-container::before {
        content: '.';
        visibility: hidden;
      }

      #expand {
        --cr-icon-button-fill-color: var(--primary-text-color);
        --cr-icon-button-icon-size: 16px;
        --cr-icon-button-size: var(--expand-button-size);
        left: 0;
        margin: 0;
        position: absolute;
        /* Vertically aligns the expand icon with the first line of #title. */
        top: calc((100% - var(--cr-icon-button-size)) / 2);
        transition: transform 150ms;
      }

      :host-context([dir=rtl]) #expand {
        transform: rotate(180deg);
      }

      :host([children-shown_]) #expand {
        transform: rotate(90deg);
      }
    </style>
    <div id="item" on-click="onClick_">
      <div id="expand-container">
        <cr-icon-button id="expand" iron-icon="cr:chevron-right"
            aria-label="$i18n{bookmarkExpandIconAriaLabel}"
            aria-expanded$="[[getAriaExpanded_(childrenShown_)]]"
            on-click="toggleChildren_"></cr-icon-button>
      </div>
      <span id="title" tabindex="0">[[bookmark.title]]</span>
    </div>
    <!-- dom-if will stamp the complex bookmark tree lazily as individual nodes
      are opened. -->
    <template is="dom-if" if="[[childrenShown_]]">
      <template is="dom-repeat" items="[[bookmark.children]]">
        <viewer-bookmark bookmark="[[item]]" depth="[[childDepth_]]">
        </viewer-bookmark>
      </template>
    </template>
